<template>
  <div class="upload-large-root" ref="base" style="display: none">
    <div ref="largeRoot" class="large-root">
      <div class="progress-viewer" :style="{height: showAll ? '486px' : '68px'}">
        <div class="progress-viewer-header">
          <div class="progress-viewer-header__icon">
            <span class="el-icon-circle-check"></span>
          </div>
          <div class="progress-viewer-header__status">
            <span v-show="uploadStatus == UPLOAD_STATUS.COMPLETED">
            全部上传成功
            </span>
            <span v-show="uploadStatus == UPLOAD_STATUS.UPLOADING">
            上传中
            </span>
            <span v-show="uploadStatus == UPLOAD_STATUS.TIMEOUT">
            存在未上传的文件
            </span>
          </div>
          <el-button :icon="showAll ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"
                     @click="showAll = !showAll"></el-button>
          <el-button @click="removeDom" icon="el-icon-close"></el-button>
        </div>

        <div class="progress-viewer-bar">
          <div class="progress-viewer-bar__status">
            {{ uploadTitle }}
          </div>
          <div class="progress-viewer-bar__btn" @click="pauseAll" v-show="uploadStatus != UPLOAD_STATUS.COMPLETED">
            {{ uploadStatus == UPLOAD_STATUS.UPLOADING ? '全部暂停' : '继续' }}
          </div>
          <div class="progress-viewer-bar__progress" :style="{width: `${currentWidth}px`}">

          </div>
        </div>

        <div class="progress-viewer__scroller">
          <el-scrollbar class="right-scrollbar">
            <div class="progress-viewer-item" v-for="(item,index) in fileList" :key="index">
              <div class="progress-viewer-item__icon">
                <img :src="getFileIconByFileName(item.name)">
              </div>
              <div class="progress-viewer-item__detail">
                <div class="progress-viewer-item__name">{{ item.name }}</div>
                <div class="progress-viewer-item__tips">{{ item.uploadedSize }} / {{ item.size }}</div>
              </div>
              <div class="progress-viewer-item__progress-wrapper">
                <div class="progress-viewer-item__info"></div>
                <div class="progress-viewer-item__status">
                  <div @click="pause">
                    <el-progress v-show="item.status == FILE_UPLOAD_STATUS.UPLOADING" :stroke-width="3" :width="30"
                                 type="circle" :percentage="item.progress"></el-progress>
                  </div>
                  <i @click="continueUploading(index)" v-show="item.status == FILE_UPLOAD_STATUS.TIMEOUT"
                     class="el-icon-search"></i>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {FILE_UPLOAD_STATUS, UPLOAD_STATUS, UploadFileObj} from "@/utils/uploadFile";
import {addSubscription} from "@/utils/publishUtil";
import {getFileIconByFileName} from "@/utils/fileRightConfig";

export default {
  props: {},
  data() {
    return {
      fileList: [],
      requestList: [],
      showAll: true,
      UPLOAD_STATUS,
      FILE_UPLOAD_STATUS,
      uploadFileObj: null,
      uploadStatus: UPLOAD_STATUS.UPLOADING
    }
  },
  computed: {
    currentWidth() {
      let {fileList} = this
      let baseDom = document.querySelector('.progress-viewer-bar');
      let completedNum = _.filter(fileList, item => item.status == FILE_UPLOAD_STATUS.COMPLETED);
      return baseDom ? baseDom.offsetWidth * (completedNum.length / fileList.length) : 0
    },
    uploadTitle() {
      let {fileList} = this
      let completedNum = _.filter(fileList, item => item.status == FILE_UPLOAD_STATUS.COMPLETED);
      return `已上传 ${completedNum.length} / ${fileList.length} 个任务`
    },
  },
  created() {
    addSubscription('showUpload', this.init)
  },
  methods: {
    getFileIconByFileName,
    pauseAll() {
      if (this.uploadStatus == UPLOAD_STATUS.TIMEOUT) {
        this.uploadFileObj.continueAllUploading()
      } else {
        this.uploadFileObj.pauseAll()
      }
    },
    continueUploading(index) {
      this.uploadFileObj.continueUploading(index)
    },
    pause() {
      this.uploadFileObj.pauseUpload()
    },
    init(uploadFileObj) {
      if (!this.uploadFileObj) {
        this.uploadFileObj = uploadFileObj;
        this.uploadFileObj.setBackFun(this.getFileData)
      }
      this.addDomToBody()
    },
    getFileData(fileList, uploadStatus) {
      this.fileList = _.map(_.cloneDeep(fileList), (item, index) => {
        item.size = item.size > 1024 * 1024 ? `${_.round(item.size / 1024 / 1024, 2)}MB` : `${_.round(item.size / 1024, 2)}KB`
        item.uploadedSize = item.uploadedSize > 1024 * 1024 ? `${_.round(item.uploadedSize / 1024 / 1024, 2)}MB` : `${_.round(item.uploadedSize / 1024, 2)}KB`
        return item
      })
      this.uploadStatus = uploadStatus
    },

    addDomToBody() {
      let baseDom = this.$refs.base;
      if (baseDom.childNodes.length == 0) {
        return
      }
      let contentDom = this.$refs.largeRoot;
      let parentDom = document.getElementById('app')
      parentDom.appendChild(contentDom)
    },
    removeDom() {
      let contentDom = this.$refs.largeRoot;
      let baseDom = this.$refs.base;
      baseDom.appendChild(contentDom);

      this.uploadFileObj.cancelAllUpload()

      this.showAll = true;
    },
  }
}
</script>

<style scoped lang="scss">
.large-root {
  position: fixed;
  z-index: 9999;
  bottom: 30px;
  right: 30px;

  .progress-viewer {
    height: 286px;
    width: 420px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #dee0e3;
    box-shadow: 0px 6px 24px rgba(31, 35, 41, 0.08);
    -webkit-transition: opacity .15s ease-in, height .15s ease-in, -webkit-transform .15s ease-in;
    -o-transition: opacity .15s ease-in, transform .15s ease-in, height .15s ease-in;
    transition: opacity .15s ease-in, transform .15s ease-in, height .15s ease-in, -webkit-transform .15s ease-in;


    .progress-viewer-header {
      position: relative;
      z-index: 100;
      width: 100%;
      height: 68px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;

      .progress-viewer-header__icon {
        font-size: 28px;
        margin-left: 20px;
        height: 28px;
        line-height: 28px;
      }

      .progress-viewer-header__status {
        margin-left: 16px;
        font-size: 20px;
        font-weight: 600;
        color: #2b2f36;
        line-height: 22px;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
      }

      ::v-deep .el-button {
        height: 28px;
        width: 28px;
        padding: 0;
        margin-right: 12px;

        &:focus {
          background: transparent;
          border-color: rgba(31, 35, 41, 0.1);
        }

        &:hover {
          background: rgba(31, 35, 41, 0.1);
          border-color: rgba(31, 35, 41, 0.1);
        }

        i {
          font-size: 20px !important;
          color: #646a73;
        }
      }
    }

    .progress-viewer-bar {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      width: 100%;
      height: 40px;
      background-color: #f5f6f7;
      margin-bottom: 4px;

      .progress-viewer-bar__status {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        font-size: 14px;
        color: #1f2329;
        z-index: 1;
        margin-left: 24px;
      }

      .progress-viewer-bar__btn {
        font-size: 14px;
        color: #1f2329;
        z-index: 1;
        margin-right: 16px;
        cursor: pointer;
        padding: 0 4px;
        border-radius: 4px;
      }

      .progress-viewer-bar__progress {
        position: absolute;
        top: 0;
        left: 0;
        height: 40px;
        background-color: rgba(51, 112, 255, .5);
        -webkit-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
      }
    }

    .progress-viewer__scroller {
      height: 370px;

      ::v-deep .el-scrollbar {
        height: 100%;

        .el-scrollbar__wrap {
          overflow-x: hidden;

          .el-scrollbar__view {
            height: 100%;

            .progress-viewer-item {
              height: 56px;
              width: 100%;
              z-index: 100;
              background: #fff;
              display: -webkit-box;
              display: -ms-flexbox;
              display: flex;
              -webkit-box-pack: justify;
              -ms-flex-pack: justify;
              justify-content: space-between;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              font-size: 12px;
              position: relative;

              &:hover {
                background: transparent;
              }

              &:hover:before {
                content: "";
                display: block;
                position: absolute;
                top: 1px;
                left: 4px;
                right: 4px;
                bottom: 0;
                background: rgba(31, 35, 41, 0.08);
                z-index: 0;
                -webkit-transition: .3s;
                -o-transition: .3s;
                transition: .3s;
                border-radius: 6px;
              }

              .progress-viewer-item__icon {
                height: 24px;
                width: 24px;
                margin-left: 22px;

                img {
                  height: 100%;
                  width: 100%;
                }
              }

              .progress-viewer-item__detail {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                margin: 0 10px;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                overflow: hidden;

                .progress-viewer-item__name {
                  font-size: 14px;
                  height: 20px;
                  line-height: 20px;
                  white-space: nowrap;
                  overflow: hidden;
                  -o-text-overflow: ellipsis;
                  text-overflow: ellipsis;
                }

                .progress-viewer-item__tips {
                  font-size: 12px;
                  height: 18px;
                  line-height: 18px;
                  color: var(--text-caption);
                  white-space: nowrap;
                  overflow: hidden;
                  -o-text-overflow: ellipsis;
                  text-overflow: ellipsis;
                }
              }

              .progress-viewer-item__progress-wrapper {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                min-width: 84px;
                -webkit-box-pack: end;
                -ms-flex-pack: end;
                justify-content: flex-end;

                .progress-viewer-item__info {
                  color: #8f959e;
                  line-height: 24px;
                  margin-right: 4px;
                }

                .progress-viewer-item__status {
                  position: relative;
                  min-width: 24px;
                  height: 24px;
                  margin-right: 20px;
                  cursor: pointer;
                  border-radius: 4px;
                  display: -webkit-box;
                  display: -ms-flexbox;
                  display: flex;
                  -webkit-box-pack: center;
                  -ms-flex-pack: center;
                  justify-content: center;
                  -webkit-box-align: center;
                  -ms-flex-align: center;
                  align-items: center;
                }
              }
            }
          }
        }

      }
    }
  }
}
</style>
